---
title: React Progress Bar - Flowbite
description: The progress bar component is used to show the completion rate of a given task in the form of a filled bar where you can also add a label indicating percentage
---

Use the progress bar component from Flowbite React to show the percentage and completion rate of a given task using a visually friendly bar meter based on multiple styles and sizes.

Choose one of the examples below for your application and use the React props to update the progress fill rate, label, sizing, and colors and customize with the classes from Tailwind CSS.

To start using the progress bar component make sure you import it first from Flowbite React:

```jsx
import { Progress } from "flowbite-react";
```

## Default progress bar

Use this example to show a progress bar where you can set the progress rate using the `progress` prop from React which should be a number from 1 to 100.

<Example name="progress.root" />

## Progress bar with labels

Use this example to show a progress bar with a label. You can set the label text using the `textLabel` prop and the progress text using the `labelText` prop.

<Example name="progress.withLabels" />

## Label positioning

This example shows how you can position the label text inside the progress bar by using the React props called `progressLabelPosition` and `textLabelPosition` on the `<Progress>` component in React.

<Example name="progress.positioning" />

## Sizing

The `size` prop from React can be used on the `<Progress>` component to set the size of the progress bar. You can choose from `sm`, `md`, `lg` and `xl`.

<Example name="progress.sizing" />

## Colors

Set your own custom colors for the progress bar component by using the `color` prop from React and the utility classes from Tailwind CSS.

<Example name="progress.colors" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="progress" />

## References

- [Flowbite Progress Bar](https://flowbite.com/docs/components/progress/)
